<template>
	<v-menu ref="menu" @change="change"></v-menu>
</template>
<script>
import menu from "@/menu/menu"
export default {
	name: 'menu',
	components: {
		"v-menu": menu,
	},
	data() {
		return {
			b: false,
			vChilds: null,
			vBtn: null,
			vBox: null
		}
	},
	mounted() {
		this.vChilds = this.$refs.menu.$refs.btn.childNodes;
		this.vBtn = this.$refs.menu.$refs.btn;
		this.vBox = this.$refs.menu.$refs.box;
		this.vBtn.style.cssText = "z-index:1000;right:0;transition: right 1s;";
	},
	methods: {
		change() {
			if(!this.b){
				this.vChilds[0].style.cssText = "transform: translate(0,0) rotate(-45deg);transition: transform 1s;margin-top:4px;";
				this.vChilds[1].style.display = "none";
				this.vChilds[2].style.cssText = "transform: translate(0,-250%) rotate(45deg);transition: transform 1s;";
				this.vBtn.style.cssText = "z-index:1000;right:-26%;transition: right 1s;";
				this.vBox.style.cssText = "transform: translate(0,0);transition: transform 1s;";
				
			}else{
				this.vChilds[0].style.cssText = "transform: translate(0,0) rotate(0);transition: transform 1s;margin-top:4px;";
				this.vChilds[1].style.display = "block";
				this.vChilds[2].style.cssText = "transform: translate(0,0) rotate(0);transition: transform 1s;";
				this.vBtn.style.cssText = "z-index:1000;right:0;transition: right 1s;";
				this.vBox.style.cssText = "transform: translate(-400px,0);transition: transform 1s;";
			}
			this.b = !this.b;
		}
	}
}
</script>